<template>
	<view>
		<scroll-view v-if="category.length" class='ws-n sarr bf pt10 p03'  scroll-x='true'>
			<block v-for="(v,i) in category" :key='i'>
				<view @click="clickSarr(i)" class='f-g-0 mr15 bs10 c6 dis-in sarri f28 t-c' :class="{wei:v.active}" :style="{background:v.active?`rgba(${cTR(tColor)},1)`:'',color:v.active?'#ffffff':'#000'}">{{v.name}}</view>
			</block>
		</scroll-view>
		<view class="bf mt20">
			<view class="p3">
				<view class="title f36">商品概况</view>
				<view class="cardList">
					<view class="card-inactive" v-for="(item,index) in list" :key="item.name">
						<text class="f26">{{item.name}}</text>
						<text class="f34 mt20 wei">{{item.num}}</text>
					</view>
				</view>
			</view>
			<view class="p03 f-x-bt">
				<view class="flex">
					<view class="sort" @click="sortClick = false">
						<text :style="{color:sortClick?'#000':'#FE9367'}">按销量</text>
						<view class="icon"><text class="up" /><text class="down" :style="{borderTopColor:sortClick?'#E8E8E8':'#FE9367'}" /></view>
					</view>
					<view class="sort" @click="sortClick = true">
						<text :style="{color:sortClick?'#FE9367':'#000'}">按销售额</text>
						<view class="icon"><text class="up" /><text class="down" :style="{borderTopColor:sortClick?'#FE9367':'#E8E8E8'}" /></view>
					</view>
					
					
				</view>
				<view class="date">
						<u-action-sheet :list="date" v-model="show" @click="selectDate"></u-action-sheet>
						<view @click="show = true">{{dateTitle}}
						<text class="iconfont icondown wei c0 f24 ml5"></text>
						</view>
				</view>
			</view>
			<view class="p03">
				<fill-height-scroll-view>
					<template slot="element">
						<view class="pb30">
							<view v-for="(item,index) in payTop" :key="item.icon" class="flex mt20">
								<view class="posi-r bs20">
									<view class="rank">{{(index+1)<10?"0"+(index+1):index+1}}</view>
									<image :src="item.icon" mode="" style="width: 160rpx;height: 160rpx;"></image>
								</view>
								<view class="f-c-s ml20">
									<view class="f30 wei">{{item.name}}</view>
									<view class="mt20">
										<text class="volume">{{sortClick?`销售额￥${item.money}`:`销量${item.num}`}}</text>
										<text>{{!sortClick?`销售额￥${item.money}`:`销量${item.num}`}}</text>
									</view>
								</view>
							</view>
						</view>
						<!-- 空布局 -->
						<mescroll-empty v-if="payTop.length === 0" :option="{tip:'~ 暂无数据 ~'}"></mescroll-empty>
					</template>
				</fill-height-scroll-view>
			</view>
		</view>
		<u-calendar v-model="showrl" mode="range" :btnstyle="{ background: '#FE9367' }" range-color="#FE9367"
			range-bg-color="rgba(253,215,75,0.2)" active-bg-color="#FE9367" @change="changeDate"></u-calendar>
	</view>
</template>

<script>
	import {
		utilMixins
	} from "@/common/util-mixins.js"
	import FillHeightScrollView from '../../components/fill-height-scroll-view.vue'
	import MescrollEmpty from '@/mescroll-uni/components/mescroll-empty.vue';
	export default {
		components:{
			FillHeightScrollView,
			MescrollEmpty
		},
		mixins: [utilMixins],
		data(){
			return{
				showrl:false,
				query:{
					goodsType:1,
					type:1,
					timeType:1,
					startTime:'',
					endTime:''
				},
				show:false,
				sortClick:false,
				navIdx:0,
				list: [],
				payTop:[],
				category:[
					{
						name: '外卖',
						active:true,
						goodsType:1
					},
					{
						name: '店内',
						active:false,
						goodsType:2
					}
				],
				date:[
					{
						text: '今日',
						value:1
					},
					{
						text: '近七日',
						value:2
					},
					{
						text: '近十五日',
						value:3
					},
					{
						text: '具体时间',
						value: 4
					}
				],
				dateTitle:'今日',
			}
		},
		watch:{
			sortClick(val){
				if(val){
					this.query.type = 2
					this.fetchData()
				}else{
					this.query.type = 1
					this.fetchData()
				}
			},
		},
		created() {
			this.fetchData()
		},
		methods:{
			async fetchData() {
				try {
					let {
						data
					} = await this.util.request({
						'url':this.api.statisticGetGoods,
						data: this.query
					})
					this.list = [
						{name: '商品总数',num: data.allGoods},{name: '已上架商品',num: data.onGoods},
						{name: '已下架商品',num: data.downGoods}
					]
					this.payTop = data.payTop
					// console.log('this.payTop',this.payTop)
				} catch (e) {
					this.util.message(e.msg, 3)
				}
			},
			changeDate(e) {
				this.query.startTime = e.startDate
				this.query.endTime = e.endDate
				this.fetchData()
			},
			selectDate(i){
				this.dateTitle = this.date[i].text
				this.query.timeType = this.date[i].value
				if(this.query.timeType!=4){
					this.fetchData()
				}else{
					this.showrl = true
				}
			},
			clickSarr(index){
				this.category.forEach((item,i) =>{
					if(i === index){
						item.active = true 
						this.query.goodsType = item.goodsType
						this.fetchData()
					}else{
						item.active = false 
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.volume{
		border: 1px solid #4a56f1;
		padding: 2rpx 4rpx;
		font-size: 24rpx;
		border-radius: 4rpx;
		color: #4a56f1;
		margin-right: 10rpx;
	}
	.title {
		font-weight: bold;
		color: #000;
	}
	.rank{
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		left: 0;
		top:0;
		color: #FFFFFF;
		background-color: #DDDDDD;
		border-radius: 10rpx;
	}
	.cardList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		font-size: 30rpx;
	
		.card-inactive {
			display: flex;
			flex-direction: column;
			width: 220rpx;
			height: 160rpx;
			background: #FFFFFF;
			border: 1px solid #ccc;
			margin-top: 20rpx;
			border-radius: 10rpx;
			justify-content: center;
			padding: 20rpx;
		}
	
		.card-active {
			display: flex;
			flex-direction: column;
			width: 220rpx;
			height: 160rpx;
			// background: #FEFAED;
			background: #fe93673d;
			margin-top: 20rpx;
			// border: 1px solid #E3BD76;
			border: 1px solid #fe9367;
			border-radius: 10rpx;
			justify-content: center;
			padding: 20rpx;
			font-weight: bold;
		}
	}
	.sort{
		position: relative;
		margin-right: 60rpx;
	}
	.icon{
		position: absolute;
		right: -10rpx;
		top: 50%;
		.up{
			position: absolute;
			width: 0;
			height: 0;
			bottom: 2rpx;
			border-right: 10rpx solid transparent;
			border-left: 10rpx solid transparent;
			border-bottom: 10rpx solid #818488;
		}
		.down{
			position: absolute;
			width: 0;
			height: 0;
			top: 2prx;
			border-right: 10rpx solid transparent;
			border-left: 10rpx solid transparent;
			border-top: 10rpx solid #E19644;
		}
	}
</style>
